<!DOCTYPE html>
<html>
<head>
	<title>属性编辑器</title>
</head>
<body>
	<header style="padding: 5px">
		<h2>组合属性编辑-模拟</h2>
	</header>

	<div id="spec_names">
		属性名：
		<ul>
		</ul>
		<div>
			
			<span class="con hide">
				<input type="text" id="sname">
				<button onclick="addSpecName()">确定</button>
			</span>
			<span class="add" onclick="add(this)">+</span>
		</div>
	</div>
	<div id="spec_list">
	</div>
	<div style="padding:20px 0 ">
		<button onclick="addgroup()">新增属性组</button>
	</div>
	<div id="spec_group_list">
		<ul></ul>
	</div>

	<div style="padding:20px 0">
		<form method="post" id="testform">
			<input type="" name="a" value="12">
		</form>
		<button onclick="specAgree()">确认</button>
	</div>
	<script id="spec_items_tmp" type="html/text">
	<div id="spec_items_{{id}}" class="spec_items" for="{{name}}">
		属性条
		<dl>
			<dt>{{name}}：</dt>
		</dl>
		<div>
			
			<span class="con hide">
				<input type="text" id="sitem_{{id}}">
				<button onclick="addSpecItem('{{name}}',{{id}})">确定</button>
			</span>
			<span class="add" onclick="add(this)">+</span>
		</div>
	</div>
	</script>
	<script id="item_tmp" type="text/html">
		<dd onclick="activedd(this,'{{spec_name}}')">{{name}}</dd>
	</script>

	<script id="g_item_tmp" type="text/html">
		<li>{{name}}
			<input type="number" onchange="savegroupnum(this)" id="{{name}}_num" value="{{num}}" group-name="{{name}}" placeholder="库存">
			<input type="number" onchange="savegroupprice(this)" id="{{name}}_price" value="{{price}}" group-name="{{name}}" placeholder="价格">
			<span onclick="deletegroup('{{name}}',this)">-</span>
		</li>
	</script>

	<style type="text/css">
		.hide{
			display: none;
		}
		dl dt,dl dd{
			display: inline;
			margin:0;
		}
		dl dd{
			border: #ccc 1px solid;
		}
		dd.active{
			background: #ccc;
			color: #fff;
		}
		.spec_items{
			border: #ccc 1px solid;
    		margin: 10px;
		}
	</style>
	<script src="/component/jquery.min.js"></script>
	<script type="text/javascript">
		
		var spec_info = {
			"颜色":["白色","红色"]
		};//属性列表信息
		var group_list = {
			"颜色|白色":{"name":"颜色|白色","num":10,"price":2.25}
		}//属性组合列表
		var auto_id = 1;//自增id

		var select_spec_list = {};//选择临时存储
		function renderSpecList(){
			auto_id = 1;
			//渲染清除容器中的内容
			$('#spec_names').find('ul').html('');
			$('#spec_list').html('');

			for(i in spec_info){
				name = i;
				//属性名
				$('#spec_names').find('ul').append(
					"<li>"+name+"<span onclick='deletespec(\""+name+"\",this)'>-</span></li>"
					);
				var data ={"id":auto_id,"name":name};
				
				var tmp = tmpRender('#spec_items_tmp',data);
				//属性条目容器
				$('#spec_list').append(tmp);
				//渲染属性条目
				renderSpecItems(name,spec_info[name])
				auto_id++;
			}
			renderGroupList();

		}
		function renderGroupList(){
			$('#spec_group_list').find('ul').html('');
			//渲染组合属性
			
			for(ti in group_list){
				console.log('gli:',group_list[ti])
				console.log('d:',ti);
				existi = groupItemsChk(ti);
				console.log('t:',ti);

				if(existi){
					console.log('g:',group_list[ti])
					data = group_list[ti];
					
					var tmp = tmpRender('#g_item_tmp',data);
					$('#spec_group_list').find('ul').append(tmp);
				}
			}
		}
		//检查属性列表
		function groupItemsChk(item_names){
			var parsearr = item_names.split(',');
			console.log('parse:',parsearr)
			for(i in parsearr){
				console.log(parsearr[i])
				if(!groupItemChk(parsearr[i])){
					return false;
				}
			}
			return true;
		}
		function groupItemChk(item_name){
			var parsearr = item_name.split('|');
			var specName = parsearr[0];
			var specItem = parsearr[1];
			console.log('n:',specItem);
			var existSpecName = false;
			var existSpecItem = false;
			for(var i in spec_info){
				if(i==specName){
					existSpecName = true;
					for(var ii in spec_info[i]){
						console.log('i:',ii)
						if(spec_info[i][ii]==specItem){
							console.log('ii',specItem);
							existSpecItem = true;
						}
					}
				}
			}
			return existSpecName && existSpecItem;
		}
		function renderSpecItems(spec_name,items){
			for(i in items){
				name = items[i]
				data = {"name":name,"spec_name":spec_name};
				var item_tmp =tmpRender('#item_tmp',data)
				$('*[for="'+spec_name+'"]').find('dl').append(item_tmp);
			}
		}

		function add(obj){
			var con = $(obj).parent().find('.con');
			if(con.hasClass('hide')){
				$(obj).html('-');
				con.removeClass('hide');
			}else{
				$(obj).html('+');
				con.addClass('hide');
			}
		}
		function savegroupnum(obj){
			var _group = $(obj).attr('group-name');
			var _num = $(obj).val();
			if(_num==''){
				return false;
			}
			group_list[_group].num = _num;
			console.log(group_list);
			console.log(_group,'：',_num)
		}
		function savegroupprice(obj){
			var _group = $(obj).attr('group-name');
			var _price = $(obj).val();
			if(_price==''){
				return false;
			}
			group_list[_group].price = _price;
			console.log(group_list);
			console.log(_group,'：',_price)
		}
		function existSpecName(name){
			console.log(spec_info[name]);
			if(typeof spec_info[name]!='undefined'){
				console.log('属性名重复');
				return false;
			}
			return true;
		}
		function existSpecItem(name,spec_name){
			var items = spec_info[spec_name];
			for(i in items){
				if(items[i]==name){
					return true;
				}
			}
			return false;
		}
		function deletespec(name,ele){
			$(ele).parent().remove();
			delete spec_info[name];
			console.log('nnn:',spec_info);
			renderSpecList();
		}
		function addSpecName(){
			var name = $('#sname').val();
			if(/^\s*$/.test(name)){
				alert('不能为空!');
				return false;
			}
			if(!existSpecName(name)){
				return false;
			}
			$('#spec_names').find('ul').append(
				"<li>"+name+"<span onclick='deletespec(\""+name+"\",this)'>-</span></li>"
				);
			spec_info[name] = [];
			var data ={"id":auto_id,"name":name};
			var tmp = tmpRender('#spec_items_tmp',data);
			$('#spec_list').append(tmp)
			auto_id++;

		}
		function addSpecItem(spec_name,id){
			var name = $('#sitem_'+id).val();
			if(existSpecItem(name,spec_name)){
				return false;
			}
			data = {"name":name,"spec_name":spec_name};
			var item_tmp =tmpRender('#item_tmp',data)
			$('*[for="'+spec_name+'"]').find('dl').append(item_tmp);
			spec_info[spec_name].push(name);
			renderGroupList();//更新组合列表
			console.log(spec_info);
		}
		function activedd(obj,spec_name){
			$(obj).parent().find('dd').removeClass('active')
			$(obj).addClass('active')
			var item = $(obj).html();
			select_spec_list[spec_name] = item;
			console.log(select_spec_list)
		}
		//组合属性是否已经存在
		function existgroup(group){
			//直接比较字符串相同
			for(i in group_list){
				if(i == group){
					return true;
				}
			}

			//深度比较属性
			group = group.split(',');
			for(i in group_list){
				var _group = i.split(',')
				var _same = compareArr(group,_group);
				if(_same){
					return true;
				}
			}
			return false;
		}
		function compareArr(a, b){
			a = a.sort().join(',');
			b = b.sort().join(',');
			return a==b;
		}
		function getFormData($form) {
		    var unindexed_array = $form.serializeArray();
		    var indexed_array = {};

		    $.map(unindexed_array, function (n, i) {
		      indexed_array[n['name']] = n['value'];
		    });

		    return indexed_array;
		}
		function specAgree(){
			console.log('group：',group_list);

			console.log('spec_info：',spec_info);
			var data = getFormData($('#testform'));
			data.speclist = spec_info;
			data.group = group_list;
			console.log(data);
			$.post('/attr/post',data,function(res){
				console.log(res)
			})

		}
		
		function addgroup(){
			if(Object.keys(select_spec_list).length<1){
				return false;
			}
			var group = '';
			for(i in select_spec_list){
				group +=i+'|'+select_spec_list[i]+',';
			}
			group = group.replace(/,$/,'',group);
			if(existgroup(group)){
				console.log('组合属性存在!')
				return false;
			}

			data = group_list[group] = {"name":group,"num":"","price":""};
			console.log('grouplist:',group_list);
			
			var tmp = tmpRender('#g_item_tmp',data);
			$('#spec_group_list').find('ul').append(tmp);
		}
		function deletegroup(group,obj){
			delete group_list[group];
			$(obj).parent().remove();
			console.log(group_list)
		}
		//模板渲染
		function tmpRender(id,data){
			var tmp = $(id).html();
			for(i in data){
				console.log(i)
				var reg = new RegExp("{{"+i+"}}", "g" )
				tmp = tmp.replace(reg, data[i]);
			}
			console.log(tmp);
			return tmp;
		}
		renderSpecList();
		//tmpRender('#spec_items_tmp',{"name":"test"});
	</script>
</body>
</html>